<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/common.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/blog_logo.png" alt="">
        <a class="title" href="./myblog_list.html">思维驿站--燃笔博客</a>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_add.html">写博客</a>
        <a href="javascript:logout()">注销</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="" class="avtar" alt="" id="user_photo">
                <h3 id="username"></h3>
                <a href="https://gitee.com/whiteinjava" target="_blank">gitee 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span id="art_count"></span>
                    <span>1</span>
                </div>
            </div>
            <div id="line"></div>
            <div class="set_up">
                <ul id="set_detail">
                    <p>设置</p>
                    <li id="one">修&nbsp;改&nbsp;昵&nbsp;称</li>
                    <li id="modify_nickname">
                        <input type="text" placeholder="请输入新昵称" id="new_nick">
                        <input type="button" value="提交" id="nick_sub" onclick="modifyNickName()">
                    </li>
                    <li id="two">修&nbsp;改&nbsp;密&nbsp;码</li>
                    <li id="modify_password">
                        <input type="text" placeholder="请输入旧密码" id="old_pass">
                        <br> <input type="text" placeholder="请输入新密码" id="new_pass">
                        <br><input type="button" value="提交" id="pass_sub" onclick="modifyPassword()">
                    </li>
                    <li id="three">更&nbsp;换&nbsp;头&nbsp;像</li>
                    <li id="sub_photo">
                        <input type="file" value="更换头像" id="photo_file">
                        <input type="button" value="提交" id="sub_file" onclick="subPhoto()">
                    </li>
                    <li onclick="changeBgc()">更&nbsp;换&nbsp;背&nbsp;景</li>
                </ul>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right" id="blog_container">
            <!-- 每一篇博客包含标题, 摘要, 时间 -->
            <!-- <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2021-06-02</div>
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum distinctio ullam eum ut
                    veroab laborum numquam tenetur est in dolorum a sint, assumenda adipisci similique quaerat vel.
                    Facere,
                    et.
                </div>
                <a href="blog_content.html?id=1" class="detail">查看全文 &gt;&gt;</a>&nbsp;&nbsp;
                <a href="blog_content.html?id=1" class="detail">修改文章 &gt;&gt;</a>&nbsp;&nbsp;
                <a href="blog_content.html?id=1" class="detail">删除文章 &gt;&gt;</a>
            </div>
        </div> -->
        </div>
        <script>
            function getUserInfo() {
                var $username = jQuery('#username')
                var $art_count = jQuery('#art_count')
                var $img = jQuery('#user_photo')
                jQuery.ajax({
                    url: 'user/info',
                    type: 'get',
                    success: function (result) {
                        if (result != null && result.code == 200 && result.data != null) {
                            $username.html(result.data.nickname)
                            $art_count.html(result.data.artCount)
                            $img.attr('src', result.data.photo)
                        } else {
                            alert('获取个人信息失败，请刷新重试!')
                        }
                    }
                })
            }
            getUserInfo()

            function getList() {
                jQuery.ajax({
                    url: 'art/my_list',
                    type: 'get',
                    success: function (result) {
                        if (result != null && result.code == 200 && result.data != null && result.data.length > 0) {
                            var blog_content = ''
                            for (var i = 0; i < result.data.length; i++) {
                                var blog = result.data[i]
                                blog_content += `<div class="blog">
                                <div class="title">${blog.title}</div>
                                <div class="date">${blog.createTime}</div>
                                <div class="desc">
                                    ${blog.content}
                                </div>
                                <a href="blog_content.html?id=${blog.artId}" class="detail">查看全文 &gt;&gt;</a>&nbsp;&nbsp;
                                <a href="blog_edit.html?id=${blog.artId}" class="detail">修改文章 &gt;&gt;</a>&nbsp;&nbsp;
                                <a href="javascript:delArt(${blog.artId})" class="detail">删除文章 &gt;&gt;</a>
                                <div class="line_"></div>
                            </div>`
                            }
                            jQuery('#blog_container').html(blog_content)
                        } else {
                            jQuery('#blog_container').html('<h3>空空如耶~</h3>')
                        }
                    }
                })
            }
            getList()

            function delArt(artId) {
                if (confirm('确认删除吗？')) {
                    jQuery.ajax({
                        url: "art/del",
                        type: "post",
                        data: {
                            "artId": artId
                        },
                        success: function (result) {
                            if (result != null && result.code == 200 && result.data == 1) {
                                alert("删除成功！")
                                location.href = location.href   //刷新页面
                            } else {
                                alert("删除失败，请重试！")
                            }
                        }
                    })
                }
            }

            jQuery('#one').click(() => {
                var disState = jQuery('#modify_nickname').css('display') == 'block' ? 'none' : 'block'
                jQuery('#modify_nickname').css('display', disState)
            })


            jQuery('#two').click(() => {
                var disState = jQuery('#modify_password').css('display') == 'block' ? 'none' : 'block'
                jQuery('#modify_password').css('display', disState)
            })

            jQuery('#three').click(() => {
                var disState = jQuery('#sub_photo').css('display') == 'block' ? 'none' : 'block'
                jQuery('#sub_photo').css('display', disState)
            })


            function modifyNickName() {
                var $nickname = jQuery('#new_nick')
                if ($nickname.val() == '') {
                    alert('请输入昵称！')
                    $nickname.focus()
                    return
                }
                if ($nickname.val().length > 64) {
                    alert('请缩短昵称长度至小于64！')
                    $nickname.focus()
                    return
                }
                jQuery.ajax({
                    url: "/user/nick",
                    type: "post",
                    data: {
                        "nickname": $nickname.val()
                    },
                    success: function (result) {
                        if (result != null && result.code == 200 && result.data == 1) {
                            alert('修改成功')
                            jQuery('#modify_nickname').css('display', 'none')
                            jQuery('#new_nick').val('')
                            getUserInfo()
                        } else if (result != null && result.code != 200) {
                            alert(result.msg)
                        }
                    }
                })
            }


            function modifyPassword() {
                var $oldPassword = jQuery('#old_pass')
                var $newPassword = jQuery('#new_pass')
                if ($oldPassword.val() == '') {
                    alert('请输入旧密码！')
                    $oldPassword.focus()
                    return
                }
                if ($newPassword.val() == '') {
                    alert('请输入新密码')
                    $newPassword.focus()
                    return
                }

                if ($newPassword.val() == $oldPassword.val()) {
                    alert('新旧密码一致，无需修改！')
                    return
                }

                jQuery.ajax({
                    url: "/user/up_pwd",
                    type: "post",
                    data: {
                        "oldPassword": $oldPassword.val(),
                        "newPassword": $newPassword.val()
                    },
                    success: function (result) {
                        if (result != null && result.code == 200 && result.data == 1) {
                            alert("修改成功,请重新登录!")
                            location.href = 'login.html'
                        } else if (result != null && result.code != 200) {
                            alert(result.msg)
                        }
                    }
                })
            }

            function subPhoto() {
                var formData = new FormData();
                formData.append("updatePhoto", $("#photo_file")[0].files[0])
                $.ajax({
                    url: '/user/upd_photo',
                    type: 'post',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        if (result != null && result.code == 200) {
                            alert('上传成功！')
                            jQuery('#sub_photo').css('display', 'none')
                            getUserInfo()
                        } else if (result != null && result.code != 200) {
                            alert(result.msg);
                        }
                    }
                })
            }

            function changeBgc() {
                var ranNum = (Math.floor((Math.random() * 4)) + 1) //产生1-4的一个随机数
                var originalPhoto = jQuery('body').css('background-image')
                var originalNum = originalPhoto.charAt(originalPhoto.lastIndexOf('_') + 1)
                while (ranNum == originalNum) {
                    ranNum = (Math.floor((Math.random() * 4)) + 1)
                }
                jQuery('body').css('background-image', `url(../img/bgc_${ranNum}.jpg)`)
            }

        </script>
    </div>
</body>

</html>